<template>
  <div>
    <!-- <el-button class="filter-item" type="info" style="position:absolute; right:10px; top: 10px; z-index:300" @click="dialogFormVisible = true">
      查看软件版本号
    </el-button>
    <el-dialog title="软件及数据版本号" :visible.sync="dialogFormVisible" class="view-dialog" :modal="true" :show-close="true">
      <el-table :data="versionData" style="width: 100%" :header-cell-style="{ background: '#409EFF', color: 'white' }">
        <el-table-column v-if="false" type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline>
              <el-table :data="props.row.data" style="width: 90%; float: right;" :header-cell-style="{ background: '#FCB065', color: 'white' }">
                <el-table-column label="数据名称" prop="name"> </el-table-column>
                <el-table-column label="数据版本号" prop="version"> </el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="软件ID" prop="deviceId"> </el-table-column>
        <el-table-column label="软件名称" prop="software.name"> </el-table-column>
        <el-table-column label="软件版本号" prop="software.version"> </el-table-column>
      </el-table>
    </el-dialog> -->
    <div id="mygoChart" style="z-index:0;height:100%;width:100%;background-color:#000000;position: absolute;"></div>
  </div>
</template>
<script>
import go from 'gojs'
import { getDevicePageInfos } from '@/api/device'
import { getInitState } from '@/api/status'
import { getInfos } from '@/api/version'
import { getServiceNames } from './api.js'
export default {
  data() {
    return {
      dialogFormVisible: false,
      colorMap: ['green', 'red', 'gray'], // 0 -- 在线   1 -- 离线   2 -- 未知
      requireChannels: {
        //需要订阅的频道放在这里
        channels: [],
        //发出申请的组件名字放在这里
        component: 'serverLink'
      },
      serverNames: {},
      versionData: [],
      timer: null
    }
  },
  mounted() {
    this.getServiceNames()
    this.getVersionData()
  },
  created() {
    this.timer = setInterval(() => {
      this.refreshData()
    }, 1000)
  },
  beforeDestroy() {
    if (this.requireChannels.channels.length > 0) {
      //向全局申请取消订阅频道（订阅请求，订阅信息）
      this.$bus.$emit('Unsubscribe', this.requireChannels)

      // 关闭接收数据
      this.requireChannels.channels.forEach(element => {
        this.sockets.unsubscribe(element)
      })
    }
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  computed: {},
  methods: {
    timelyRefresh() {
      setInterval(() => {
        this.refreshData()
      }, 1000)
    },
    getServiceNames() {
      getServiceNames().then(response => {
        if (response.code === 0) {
          this.serverNames = response.data
          // 20231019 先init，再渲染
          this.init()
          this.subSocketChannel()
          this.refreshData()
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    getVersionData() {
      getInfos().then(response => {
        if (response.code === 0) {
          this.versionData = response.data
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    init() {
      var mySelf = this
      const MAKE = go.GraphObject.make
      mySelf.myDiagram = MAKE(go.Diagram, 'mygoChart', {
        allowVerticalScroll: false,
        isReadOnly: true,
        autoScale: go.Diagram.Uniform,

        scrollMargin: 0 // 默认下拖拽画布的时候边界是已最外的节点为边距，这个就是增加边距的，类似padding设置
      }) //构建gojs对象

      var colorTemplate = MAKE(
        go.Node,
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(go.Shape, 'RoundedRectangle', {
          width: 100,
          height: 50,
          fill: 'transparent'
        }),
        MAKE(
          go.Panel,
          'Horizontal',
          {
            padding: 5
          },
          MAKE(
            go.Shape,
            'Rectangle',
            {
              width: 40,
              height: 40,
              fill: 'transparent'
            },
            new go.Binding('fill', 'color')
          ),
          MAKE(
            go.Panel,
            MAKE(
              go.TextBlock,
              'Default Text',
              {
                margin: 12,
                stroke: 'white',
                font: '32px sans-serif'
              },
              new go.Binding('text', 'text')
            )
          )
        )
      )

      var groupTemplate = MAKE(
        go.Node,
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(go.Shape, 'RoundedRectangle', {
          width: 3500,
          height: 650,
          stroke: 'white',
          strokeWidth: 3,
          fill: 'transparent',
          strokeDashArray: [6, 3]
        }),
        MAKE(
          go.TextBlock,
          {
            text: '跟踪控车服务器A',
            margin: 12,
            stroke: 'white',
            font: '40px sans-serif',
            textAlign: 'center',
            height: 620,
            width: 3500
          },
          new go.Binding('text', 'groupText'),
          new go.Binding('verticalAlignment', 'textPosition')
        )
      )

      var XLineTemplate = MAKE(
        go.Node,
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(
          go.Shape,
          'Rectangle',
          {
            width: 2600,
            height: 10,
            stroke: 'green',
            strokeWidth: 1,
            fill: 'green'
          },
          new go.Binding('fill', 'color'),
          new go.Binding('stroke', 'color')
        )
      )

      var YLineTemplate = MAKE(
        go.Node,
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(
          go.Shape,
          'Rectangle',
          {
            width: 5,
            height: 48,
            stroke: 'green',
            strokeWidth: 1,
            fill: 'green'
          },
          new go.Binding('fill', 'color'),
          new go.Binding('stroke', 'color'),
          new go.Binding('height', 'height')
        )
      )

      var softwareTemplate = MAKE(
        go.Node,
        {
          fromSpot: go.Spot.Top,
          toSpot: go.Spot.Bottom
        },
        new go.Binding('fromSpot', 'fromSpot'),
        new go.Binding('toSpot', 'toSpot'),
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(
          go.Shape,
          'RoundedRectangle',
          {
            fill: 'gray',
            stroke: 'white',
            strokeWidth: 2,
            angle: 0,
            height: 100,
            width: 200
          },
          new go.Binding('fill', 'backColor'),
          new go.Binding('width', 'width')
        ),
        'Auto', //Vertical,Auto,Horizontal
        MAKE(
          go.Panel,
          {
            padding: 0
          },
          MAKE(
            go.Panel,
            'Vertical',
            MAKE(
              go.TextBlock,
              'Default Text',
              {
                margin: 5,
                stroke: 'white',
                font: '30px sans-serif',
                textAlign: 'center',
                verticalAlignment: go.Spot.Center,
                height: 100,
                width: 200,
                isMultiline: true
              },
              new go.Binding('width', 'width'),
              new go.Binding('text', 'softwareName')
            )
          )
        ),
        {
          mouseEnter: function(e, node, prev) {
            // console.log('mouseEnter')
          },
          mouseLeave: function(e, node, prev) {
            mySelf.detailShow = false
          }
        }
      )

      var terminalTemplate = MAKE(
        go.Node,
        {
          isShadowed: true,
          shadowOffset: new go.Point(15, 15),
          fromSpot: go.Spot.Top,
          toSpot: go.Spot.Bottom
        },
        new go.Binding('location', 'loc', go.Point.parse),
        MAKE(
          go.Shape,
          'RoundedRectangle',
          {
            fill: 'gray',
            stroke: 'white',
            strokeWidth: 2,
            angle: 0,
            height: 170,
            width: 250,
            name: 'SHAPE'
          },

          new go.Binding('fill', 'backColor'),
          new go.Binding('width', 'width'),
          new go.Binding('height', 'height')
        ),
        'Auto', //Vertical,Auto,Horizontal
        MAKE(
          go.Panel,
          'Vertical',
          MAKE(
            go.TextBlock,
            'Default Text',
            {
              margin: 5,
              stroke: 'white',
              font: '30px sans-serif',
              textAlign: 'center',
              verticalAlignment: go.Spot.Center,
              isMultiline: true,
              margin: go.Margin.parse('0 0 10 0')
            },
            new go.Binding('width', 'width'),
            new go.Binding('text', 'terminalName')
          ),
          MAKE(
            go.TextBlock,
            '在线：13',
            {
              margin: 5,
              stroke: 'white',
              font: '20px sans-serif',
              textAlign: 'center',
              verticalAlignment: go.Spot.Center,
              isMultiline: true
            },
            new go.Binding('width', 'width'),
            new go.Binding('text', 'onlineText')
          ),
          MAKE(
            go.TextBlock,
            '总计：15',
            {
              margin: 5,
              stroke: 'white',
              font: '20px sans-serif',
              textAlign: 'center',
              verticalAlignment: go.Spot.Center,
              isMultiline: true
            },
            new go.Binding('width', 'width'),
            new go.Binding('text', 'totalText')
          )
        ),
        {
          // 单击节点事件
          click: (e, node) => {
            this.showDetial(node.key)
          },
          mouseEnter: (e, obj) => {
            var shape = obj.findObject('SHAPE')
            shape.strokeWidth = 10
          },
          mouseLeave: (e, obj) => {
            var shape = obj.findObject('SHAPE')
            shape.strokeWidth = 2
          }
        }
      )

      mySelf.myDiagram.nodeTemplateMap.add('software', softwareTemplate)
      mySelf.myDiagram.nodeTemplateMap.add('terminal', terminalTemplate)
      mySelf.myDiagram.nodeTemplateMap.add('xline', XLineTemplate)
      mySelf.myDiagram.nodeTemplateMap.add('yline', YLineTemplate)
      mySelf.myDiagram.nodeTemplateMap.add('group', groupTemplate)
      mySelf.myDiagram.nodeTemplateMap.add('color', colorTemplate)

      const softwareLinkTemplate = MAKE(
        go.Link,
        {
          routing: go.Link.Orthogonal, // Orthogonal routing
          corner: 10 // with rounded corners
        },
        MAKE(
          go.Shape,
          {
            stroke: 'green',
            strokeWidth: 11
          },
          new go.Binding('stroke', 'linkColor'),
          new go.Binding('strokeWidth', 'linkWidth')
        )
      )

      mySelf.myDiagram.linkTemplateMap.add('softwareLink', softwareLinkTemplate)

      this.initSoftwareNode()
      this.initXLineNode()
      this.initComserverNode()
      this.initComserverLink()
      this.initYLineNode()
      // this.initTerminalLink()
      this.initColorNode()
      this.myDiagram.addDiagramListener('AnimationFinished', function(e) {
        e.diagram.contentAlignment = go.Spot.Center
        e.diagram.alignDocument(go.Spot.Center, go.Spot.Center)
        e.diagram.contentAlignment = go.Spot.Default
      })
    },
    initSoftwareNode() {
      var mySelf = this
      let serverNames = JSON.parse(JSON.stringify(this.serverNames))
      // delete serverNames.commsvr
      let softwareList = Object.values(serverNames)

      for (let index = 0; index < softwareList.length; index++) {
        const softwareName = softwareList[index].name
        let softwareNodeData = { key: '', softwareName: '', loc: '', width: 200, backColor: this.colorMap[2], category: 'software' }
        softwareNodeData.key = softwareList[index].id
        softwareNodeData.softwareName = softwareName
        if (index >= 0 && index < 9) {
          softwareNodeData.loc = ((index - 0) * 300).toString() + ', 400'
        } else {
          softwareNodeData.loc = ((index - 9) * 300).toString() + ', 800'
        }
        mySelf.myDiagram.model.addNodeData(softwareNodeData)
      }
    },
    initXLineNode() {
      var mySelf = this
      for (let index = 1; index < 2; index++) {
        let nodeData_host = { key: '', loc: '', color: 'white', category: 'xline' }
        // let nodeData_standby = { key: '', loc: '', color: 'white', category: 'xline' }
        nodeData_host.key = 'hostLine_' + (index + 1).toString()
        // nodeData_standby.key = 'standbyLine_' + (index + 1).toString()
        nodeData_host.loc = '-8, ' + (index * 400 - 60).toString()
        // nodeData_standby.loc = '-8, ' + (index * 400 + 150).toString()
        mySelf.myDiagram.model.addNodeData(nodeData_host)
        // mySelf.myDiagram.model.addNodeData(nodeData_standby)
      }
    },
    initComserverNode() {
      var mySelf = this
      let commsvrNodeData = { key: '', softwareName: 'ssp综合服务', loc: '', width: 250, fromSpot: go.Spot.Right, category: 'software' }
      commsvrNodeData.key = 'commsvrControl'
      // commsvrNodeData.softwareName = this.serverNames.commsvr.name
      commsvrNodeData.loc = '-457, 400'
      commsvrNodeData.backColor = 'green'
      mySelf.myDiagram.model.addNodeData(commsvrNodeData)
    },
    initComserverLink() {
      var mySelf = this
      // let comserverList = ['STP Commsvr    (A)', 'STP Commsvr    (B)', '预警 Commsvr    (A)', '预警 Commsvr    (B)']
      for (let index = 0; index < 4; index++) {
        let linkData_host = { from: '', to: '', linkColor: 'white', category: 'softwareLink' }
        // let linkData_standby = { from: '', to: '', linkColor: 'white', category: 'softwareLink' }

        if (index === 0 || index === 3) {
          // linkData_host.from = 'STPCommsvr(A)'
          // linkData_host.to = 'hostLine_' + (index + 1).toString()
          // linkData_standby.from = 'STPCommsvr(B)'
          // linkData_standby.to = 'standbyLine_' + (index + 1).toString()
        } else {
          linkData_host.from = 'commsvrControl'
          linkData_host.to = 'hostLine_' + (index + 1).toString()
          // linkData_standby.from = 'commsvrApp'
          // linkData_standby.to = 'standbyLine_' + (index + 1).toString()
        }
        mySelf.myDiagram.model.addLinkData(linkData_host)
        // mySelf.myDiagram.model.addLinkData(linkData_standby)
      }
    },
    initYLineNode() {
      var mySelf = this
      var res = mySelf.myDiagram.findNodesByExample({
        category: 'software',
        width: 200
      })
      res.each(function(node) {
        let hostYLine = { key: '', loc: '', color: 'gray', category: 'yline' }
        // let standbyYLine = { key: '', loc: '', color: 'gray', category: 'yline' }
        let x = node.data.loc.split(', ')[0]
        let y = node.data.loc.split(', ')[1]
        hostYLine.key = 'hostYLine_' + node.data.key
        // standbyYLine.key = 'standbyYLine_' + node.data.key
        hostYLine.loc = (parseInt(x) + 100).toString() + ', ' + (parseInt(y) - 49).toString()
        // standbyYLine.loc = (parseInt(x) + 100).toString() + ', ' + (parseInt(y) + 102).toString()
        Object.entries(mySelf.serverNames).forEach(([key, values]) => {
          mySelf.myDiagram.model.addNodeData(hostYLine)
          // if(node.data.key == key)
          // {
          //   // 检查数组中是否包含'1'
          //   if (values.includes('1')) {
          //     mySelf.myDiagram.model.addNodeData(hostYLine);
          //   }
          //   // 检查数组中是否包含'3'
          //   if (values.includes('3')) {
          //     mySelf.myDiagram.model.addNodeData(standbyYLine);
          //   }
          // }
        })
        // if (node.data.key == '100' || node.data.key == '110') {
        //   mySelf.myDiagram.model.addNodeData(hostYLine)
        //   mySelf.myDiagram.model.addNodeData(standbyYLine)
        // }
        // else if (node.data.key == '170' || node.data.key == '120') {
        //   mySelf.myDiagram.model.addNodeData(hostYLine)
        // }
        // else {
        //   mySelf.myDiagram.model.addNodeData(standbyYLine)
        // }
      })
    },
    showDetial(key) {
      this.detailKeyString = key
      this.listLoading = true

      if (key === '盯控管理终端') {
        return
      } else if (key === '定位终端') {
        this.deviceListQuery.deviceType = '3'
      } else if (key === '手持终端') {
        this.deviceListQuery.deviceType = '2'
      } else if (key === '车载设备') {
        this.deviceListQuery.deviceType = '1'
      } else if (key === 'STP2.0地面控制服务') {
        this.$router.replace({
          path: '/redirect/maintenance/systemState/STPStation'
        })
        return
      } else {
        return
      }
      this.dialogVisible_position = true
      getDevicePageInfos(this.deviceListQuery).then(response => {
        if (response.code === 0) {
          // var start = this.deviceListQuery.size * (this.deviceListQuery.page - 1)
          // var end = this.deviceListQuery.page * this.deviceListQuery.size
          this.list = response.data.items
          this.total = response.data.total
          this.getDeviceNetStatus()
          this.listLoading = false
        } else {
          this.$message.error(response.msg)
        }
      })
    },
    getDeviceNetStatus() {
      for (let i = 0; i < this.list.length; i++) {
        var netInfo = [{ netId: i, netStatus: 1 }, { netId: i + 1, netStatus: 1 }]
        this.list[i].netInfo = netInfo
      }
    },
    initTerminalLink() {
      // var mySelf = this
      // let list = ['4G无线通信(A)', '4G无线通信(B)']
      // let terminalList = ['手持终端', '车载设备', '定位终端']
      // list.forEach(element => {
      //   terminalList.forEach(subelement => {
      //     let link = { from: '', to: '', linkColor: 'green', linkWidth: 6, category: 'softwareLink' }
      //     link.from = element
      //     link.to = subelement
      //     mySelf.myDiagram.model.addLinkData(link)
      //   })
      // })
      // let link = { from: '', to: '', linkColor: 'green', linkWidth: 6, category: 'softwareLink' }
      // link.from = '车载设备'
      // link.to = '车地无线通信服务'
      // mySelf.myDiagram.model.addLinkData(link)
    },
    initColorNode() {
      var mySelf = this
      let colorList = this.colorMap
      let textList = ['设备正常状态', '设备离线状态', '设备未知状态']
      for (let index = 0; index < 3; index++) {
        let node = { key: '', color: '', loc: '0, 0', text: '', category: 'color' }
        node.key = textList[index] + '_color'
        node.text = textList[index]
        node.color = colorList[index]
        node.loc = (-370 + 360 * index).toString() + ', 1200'

        mySelf.myDiagram.model.addNodeData(node)
      }
    },
    subSocketChannel() {
      let keys = Object.keys(this.serverNames)
      for (let index = 0; index < this.serverNames.length; index++) {
        keys.add(this.serverNames[index].deviceId)
      }
      for (var i = 0; i < keys.length; i++) {
        let channelName = 'ServerNetState:'
        channelName += keys[i]
        this.requireChannels.channels.push(channelName)
      }
      this.$bus.$emit('Subscribe', this.requireChannels)
      for (var i = 0; i < keys.length; i++) {
        let channelName = 'ServerNetState:'
        channelName += keys[i]
        this.sockets.subscribe(channelName, res => {
          this.uppackDatas(res)
        })
      }
    },
    uppackDatas(res) {
      // var commsvr = res.data.commsvr
      var appStatusCode = -1
      var controlStatusCode = -1
      // if (commsvr.hasOwnProperty('commsvrApp')) {
      //   this.refreshCommsvrStatus('commsvrApp', Object.values(commsvr.commsvrApp)[0])
      //   return
      // }
      // if (commsvr.hasOwnProperty('commsvrControl')) {
      //   this.refreshCommsvrStatus('commsvrControl', Object.values(commsvr.commsvrControl)[0])
      //   return
      // }
      // if (commsvr.hasOwnProperty('app')) {
      //   appStatusCode = Object.values(commsvr.app)[0];
      // }
      // if (commsvr.hasOwnProperty('control')) {
      //   controlStatusCode = Object.values(commsvr.control)[0];
      // }
      this.refreshSoftwareStatus(String(res.data.deviceId), controlStatusCode, appStatusCode)
    },
    refreshData() {
      getInitState().then(res => {
        var initStatus = res.data
        for (var status in initStatus) {
          var appStatusCode = -1
          var controlStatusCode = -1
          // if(status == this.serverNames.commsvr.id){
          //   this.refreshCommsvrStatus('commsvrControl', initStatus[status])
          //   continue
          // }
          controlStatusCode = initStatus[status]
          this.refreshSoftwareStatus(String(status), controlStatusCode, appStatusCode)
        }
      })
    },
    refreshCommsvrStatus(softWareName, color) {
      var mySelf = this
      let softWare = mySelf.myDiagram.model.findNodeDataForKey(softWareName)
      mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[color])
    },
    refreshSoftwareStatus(softWareName, hostcolor, standbycolor) {
      var mySelf = this
      let softWare = mySelf.myDiagram.model.findNodeDataForKey(softWareName)
      let hostYLine = mySelf.myDiagram.model.findNodeDataForKey('hostYLine_' + softWareName)
      let standbyYLine = mySelf.myDiagram.model.findNodeDataForKey('standbyYLine_' + softWareName)
      if (hostcolor == -1 || standbycolor == -1) {
        if (hostcolor == -1) {
          mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[standbycolor])
          mySelf.myDiagram.model.setDataProperty(standbyYLine, 'color', this.colorMap[standbycolor])
        }
        if (standbycolor == -1) {
          mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[hostcolor])
          mySelf.myDiagram.model.setDataProperty(hostYLine, 'color', this.colorMap[hostcolor])
        }
      } else {
        if (standbycolor == 0 || hostcolor == 0) {
          mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[0])
          mySelf.myDiagram.model.setDataProperty(hostYLine, 'color', this.colorMap[hostcolor])
          mySelf.myDiagram.model.setDataProperty(standbyYLine, 'color', this.colorMap[standbycolor])
        } else if (standbycolor == 1 || hostcolor == 1) {
          mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[1])
          mySelf.myDiagram.model.setDataProperty(hostYLine, 'color', this.colorMap[hostcolor])
          mySelf.myDiagram.model.setDataProperty(standbyYLine, 'color', this.colorMap[standbycolor])
        } else {
          mySelf.myDiagram.model.setDataProperty(softWare, 'backColor', this.colorMap[2])
          mySelf.myDiagram.model.setDataProperty(hostYLine, 'color', this.colorMap[hostcolor])
          mySelf.myDiagram.model.setDataProperty(standbyYLine, 'color', this.colorMap[standbycolor])
        }
      }
    }
    // refreshTips(softWareName, softWareVersion) {
    //   var mySelf = this
    //   let softWare = mySelf.myDiagram.model.findNodeDataForKey(softWareName)
    //   var version = "版本号：" + softWareVersion
    //   mySelf.myDiagram.model.setDataProperty(softWare, 'tip', version)
    // }
  }
}
</script>
<style scoped>
/* 弹窗 */
/* 改变高度弹窗位置*/
/deep/ .dialog-content .el-dialog__body {
  height: 40vh;
  overflow: auto;
}

/deep/ .view-dialog > .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 2px 2px 5px #d0d0d0;
  max-height: calc(100%);
  max-width: calc(100%);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: hidden auto;
  /* 隐藏水平滚动条，显示垂直滚动条 */
  /* overflow-y: scroll; 显示垂直滚动条 */
}

/deep/ .view-dialog > .el-dialog > .el-dialog__header {
  width: 100%;
  height: 54px;
  line-height: 54px;
  text-align: center;
  background: #f4f5f7;
  border-radius: 12px 12px 0px 0px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #252b3a;
  padding: 0 0 0 40px;
  padding-left: 0;
}

/deep/ .view-dialog > .el-dialog > .el-dialog__footer {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/deep/ .dialog-form > .el-form-item {
  margin-bottom: 30px;
}

/deep/ .dialog-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner {
  width: 220px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #dcdee2;
  border-radius: 3px;
}

/deep/ .dialog-form > .el-form-item > .el-form-item__content > .el-select > .el-input > .el-input__inner {
  width: 220px;
  height: 34px;
  background: #ffffff;
  border: 1px solid #dcdee2;
  border-radius: 3px;
}

/deep/ .view-dialog > .el-dialog > .el-dialog__header > .el-dialog__headerbtn {
  top: 0;
}

/deep/ .view-dialog .el-form-item__content {
  width: 100%;
}
</style>
